<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>

    <title>牧中智慧畜牧大数据云平台V1.0</title>
    <meta name="description" content="牧中智慧畜牧大数据云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link href="/webjars/js/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/webjars/fonts/font-awesome-4/css/font-awesome.min.css"/>


    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/webjars/js/jquery.gritter/css/jquery.gritter.css"/>

    <link rel="stylesheet" type="text/css" href="/webjars/js/jquery.nanoscroller/nanoscroller.css"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/jquery.easypiechart/jquery.easy-pie-chart.css"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/bootstrap.switch/bootstrap-switch.css"/>
    <link rel="stylesheet" type="text/css"
          href="/webjars/js/bootstrap.datetimepicker/css/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/jquery.select2/select2.css"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/bootstrap.slider/css/slider.css"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/intro.js/introjs.css"/>
    <link rel="stylesheet" href="/webjars/js/jquery.vectormaps/jquery-jvectormap-1.2.2.css" type="text/css"
          media="screen"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/jquery.magnific-popup/dist/magnific-popup.css"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/jquery.niftymodals/css/component.css"/>
    <link rel="stylesheet" type="text/css" href="/webjars/js/bootstrap.summernote/dist/summernote.css"/>


    <style>
        .container-login {
            width: 100%;
            overflow: hidden;
        }

        .header-box {
            width: 100%;
            overflow: hidden;
            height: 100px;
        }

        .header-box span {
            font-size: 40px;
            letter-spacing: 5px;
            float: left;
            margin-top: 20px;
            margin-left: 20px;
        }

        .box-img {
            margin-left: 50px;
            float: left;
            margin-top: 25px;
        }

        .container-box {
            position: relative;
            width: 100%;
        }

        .back-img {
            float: left;
            padding: 50px 100px 0 0;
        }

        .back-img img {
            width: 500px;
        }

        .login-box {
            position: absolute;
            top: 100px;
            right: 100px;
            width: 360px;
            border: 1px solid #CCC;
        }

        .login-text-box {
            width: 400px;
            padding: 25px 30px 25px 30px;
            color: #6c6c6c;
            background: #fff;
            position: relative;
            margin: 0 auto;
            height: 350px;
        }

        .login-tip {
            position: absolute;
            top: 5px;
            right: 58px;
        }

        .poptip-content {
            color: #df9c1f;
            font-size: 12px;
            font-weight: 400;
        }

        .static-form {
            display: block;
            position: relative;
        }

        .static-form input {
            width: 336px;
            height: 48px;
            line-height: 22px;
            padding: 13px 16px 13px 14px;
            display: block;
        }

        .login-title {
            height: 18px;
            line-height: 18px;
            font-size: 16px;
            color: #666666;
            margin-top: 9px;
            padding-bottom: 8px;
            font-weight: 700;
        }

        .field {
            margin-top: 20px;
            position: relative;
        }

        .carousel-inner img {
            height: 580px !important;
            width: 100% !important;
        }

        .login-header {
            overflow: hidden;
            font-size: 28px;
        }

        .login-header-right {
            width: 50%;
            text-align: center;
            float: left;

            border-right: 1px solid #919191;
            cursor:pointer;
        }


        .login-header-left {
            width: 50%;
            text-align: center;
            float: right;

            cursor:pointer;
        }
        .login-header-colora{
              color: #e4393c;
          }
        .login-header-colorb{
            color: #000;
        }



        .login-submit {
            margin-top: 30px;
            background: rgba(31, 170, 245, 1);
            height: 50px;

            font-size: 18px;
        }

        .login-bottom {
            text-align: center;
            color: #757575;
            font-size: 12px;
            padding-bottom: 20px;
        }

        .login-about {
            margin: 20px 0;
            text-align: center;
        }

        .login-about span {
            border-left: 1px solid #646464;
            padding: 0 5px;
        }

        .login-about a {
            color: #000 !important;
            padding-right: 5px;
        }

        .login-warn {
            color: #e4393c;
            font-size: 12px;
            padding: 5px 15px;
        }

    </style>
</head>
<body>
<div class="container-login"  >
    <div class="header-box">
        <div class="box-img">
            <img src="webjars/images/login/logo.png" alt="" width="50px;">
        </div>
        <span>牧中智慧畜牧大数据云平台</span>
    </div>
    <div class="container-box">
        <!--轮播轮播-->

        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="webjars/images/login/1.png" alt="说明"/>
                </div>
                <div class="item">
                    <img src="webjars/images/login/2.png" alt="说明"/>
                </div>
                <div class="item">
                    <img src="webjars/images/login/3.png" alt="说明"/>
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->

        </div>


        <div class="login-box"  id="login">
            <div class="login-text-box">
                <div class="login-header">


                    <div class="login-header" :class="{ 'login-header-colora': isA, 'login-header-colorb': !isA }" @click="toggleSelected(1)">帐号登录

                    </div>
                    <!--<div class="login-header-left" :class="{ 'login-header-colora': isB, 'login-header-colorb': !isB }" @click="toggleSelected(2)">扫码登录
                    </div>-->
                </div>
                <div class="static-form" v-show="logintypea">
                    <div class="field"><input type="text" placeholder="请输入手机号" v-model="username" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"/></div>
                    <div class="field"><input type="password" placeholder="请输入密码" v-model="password"/></div>
                    <div class="login-warn" id="message"></div>
                    <button id="but" class="btn btn-primary btn-block btn-rad login-submit" @click="checkLogin" >登录</button>
                </div>


             <!--   <div class="static-form" v-show="logintypeb">
   <img src="webjars/images/login/login_barcode.png" width="200px;"
                         style="margin-left:70px;margin-top:20px;display:block;" alt="扫码登录"/>
                    <div style="text-align:center;padding:20px;height:50px;">使用动检通APP扫码登录</div>
                </div>-->
            </div>
        </div>
    </div>
</div>
<div class="login-about">
    <a href="#">关于动检通</a>
    <span></span>
    <a href="#">联系我们</a>
    <span></span>
    <a href="#">常见问题</a>
    <span style="border:0;padding-left:30px">服务热线</span>
    <span style="border:0;padding:0">021-8035 1188</span>
</div>
<div class="login-bottom">&copy; 2017-2019 版权所有： 牧中（上海）物联网科技有限公司 沪ICP备14050121号-1</div>
</body>
<script type="text/javascript" src="webjars/js/jquery.js"></script>
<script type="text/javascript" src="webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="webjars/js/behaviour/general.js"></script>
<script src="webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="webjars/js/jquery.sparkline/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="webjars/js/jquery.easypiechart/jquery.easy-pie-chart.js"></script>
<script type="text/javascript" src="webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>

<script src="webjars/js/jquery.vectormaps/jquery-jvectormap-1.2.2.min.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-us-merc-en.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-world-mill-en.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-fr-merc-en.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-uk-mill-en.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-us-il-chicago-mill-en.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-au-mill-en.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-in-mill-en.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-map.js"></script>
<script src="webjars/js/jquery.vectormaps/maps/jquery-jvectormap-ca-lcc-en.js"></script>
<script src="webjars/js/behaviour/voice-commands.js"></script>
<script src="webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="webjars/js/jquery.flot/jquery.flot.js"></script>
<script type="text/javascript" src="webjars/js/jquery.flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="webjars/js/jquery.flot/jquery.flot.resize.js"></script>
<script type="text/javascript" src="webjars/js/jquery.flot/jquery.flot.labels.js"></script>
<script src="//cdn.bootcss.com/vue/2.4.1/vue.min.js"></script>


<script>


    $(document).ready(function () {
        var app = new Vue({
            el: '#login',
            data: {

                username: '',
                password: '',


                logintypea: true,
                logintypeb: false,
                isA:true,
                isB:false

            },
            methods: {
                checkLogin: function () {


                    $.ajax({
                        url: '/doLogin',
                        type: 'post',
                        dataType: 'json',
                        data: {username: this.username, password: this.password},
                        success: function (data) {
                            switch (data) {
                                case -1:
                                    $("#message").text("账号或密码错误");
                                    break;
                                case 0:
                                    $("#message").text("你不是政府人员无权登录");
                                    break;
                                case 1:
                                    $("#message").text("登录成功");
                                    window.location.href = '/djt/dashboard';
                                    break;

                            }
                            console.log(data)
                        },
                        fail: function (err) {
                            console.log(err)
                        }
                    });
                },
                toggleSelected: function (index) {
                    if (index === 1) {
                        this.logintypea = true;
                        this.logintypeb = false;
                        this.isA=true;
                        this.isB=false;
                    }
                    else {
                        this.logintypea = false;
                        this.logintypeb = true;
                        this.isA=false;
                        this.isB=true;
                    }
                }
            }
        })

        $("body").keyup(function(){
            if(event.keyCode==13){
                $("#but").click();
            }

        });

    });
</script>
</html>
